import React, { ReactNode, useState } from 'react'
import { Card, Row, Timeline, Icon, Modal } from 'antd'
import './style.scss'
import { settledReviewstatusEnum } from '@/pages/TodoList/List'

function ReviewHandleProgress(props: IReviewHandleProgressProps) {
  const { title, extra, actions, inner, rowGutter = 15, data = [] } = props
  const [visible, setVisible] = useState(false)
  const [visibleImg, setVisibleImg] = useState({ url: '', name: '' })
  const closeModal = () => {
    setVisible(false)
  }
  const openModal = (img) => {
    setVisible(true)
    setVisibleImg(img)
  }

  const lines = data
  const nodes = (
    <Timeline className='settled-review-progress' reverse={false}>
      {lines.map((item, index) => (
        <Timeline.Item key={index} dot={<Icon type="check-circle" style={{ fontSize: '16px' }} />}>
          {
            item ? (
              <>
                <p><span className='progress-name'>{item.name}</span><span>{item.job}</span><span className='progress-time'>{item.time}</span></p>
                <p>{settledReviewstatusEnum[item.status] || item.status}{item.message && <span>，审批意见：{item.message}</span>}</p>
                {(item.annexs && item.annexs.length > 0) && <p>附件：{item.annexs.map(annex => (<a onClick={() => openModal(annex)}>{annex.name}</a>))}</p>}
              </>
            ) : null
          }
        </Timeline.Item>
      ))}
    </Timeline>
  )
  let row = <Row gutter={rowGutter}>{nodes}</Row>
  return (
    <div className='ud-detail'>
      <Card title={title} extra={extra} actions={actions} bordered={inner !== true} size="small">{row}</Card>
      <Modal
        className="review-handle-progress-modal"
        visible={visible}
        footer={null}
        onCancel={closeModal}
      >
        <img src={visibleImg.url} alt={visibleImg.name} />
      </Modal>
    </div>
  )
}

export default React.memo(ReviewHandleProgress)

interface IReviewHandleProgressProps {
  title?: ReactNode
  extra?: ReactNode
  actions?: any
  inner?: boolean
  rowGutter?: number
  data?: IReviewHandleProgressData[]
}

interface IReviewHandleProgressData {
  name: string
  job: string
  time: string
  status: string
  message: string
  annexs?: { name: string, url: string }[]
}
